HTML개념 및 사용법

HTML개념

• HyperText Markup Language의 약어
• 프로그래밍 언어가 아닌 콘텐츠의 구조를 정희하는 마크업 언어
• 웹 콘테츠의 의미와 구조를 정의
• 확장자 .html

<p class="web">
  <!-- p는 태그, class는 속성명, "web" 속성값 -->
</p>

• 여는 태그: <p>

• 콘텐츠: 웹의 대표적인 기술 HTML/CSS/JS

• 닫는 태그:</p>

note

• (여는 태그 - 콘텐츠 - 닫는 태그) 순서이며, 전체를 요소라고 부른다.
• 요소 안에 다른 요소를 작성할 수 있다.
• 요소를 작성 시, 태그의 위치 조심하자. 실제적으로는 코드가 작동은 하지만 추후 개발에 예기치 못한 오류가 될 수도 있다.

  <p>
    HTML은 요소 안에 <strong>다른 요소가 들어갈 수 있습니다
  </p>
  </strong>

HTML/CSS를 효과적으로 짜는법

속성값(auto, inherit, unset)

• margin, padding 등 다양한 요소들이 있다.
• 초기값을 0으로 줘도 되지만 기본적으로 브라우저에서 지정한 값들이 존재한다.
• inherit, auto 등 속성에 대해 값을 부여해도 가능하지만, unset을 이용하여 브라우저가 스스로 inherit을 받을지, auto를 받을 지 판단한다.
• background-color와 같이 속성 기본값은 transparent.
  • box요소에서 background-color를 입력하였을 떄, 전체가 부모 요소에 적용한 색깔이 보인다. 이유는 자식 요소에서 background-color에 대한 기본 값이 transparent이기 때문이다.

코드 접근성 방법

1. 레이아웃에 필요한 텍스트, 버튼, 입력 등 필요한 요소들을 넣어본다.
2. css 초기화(의도하지 않은 공간에 대하여 초기화를 하고 재정의한다.)